<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="900" height="650" style="border:2px solid #aaa;">浏览器不支持canvas标签</canvas>
		
		<script>
			var img_width = 500;
			var img_height = 400;
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			var imgData = {};
			
			function draw_underLayer(){
				imgData = ctx.createImageData(img_width,img_height);
				for(var i = 0; i < imgData.data.length; i += 4){
					imgData.data[i+0]=155;
					imgData.data[i+1]=0;
					imgData.data[i+2]=0;
					imgData.data[i+3]=0.5;
				}
				ctx.putImageData(imgData,22,22);
			}
			draw_underLayer();
			
			//缩放
			var num = 1;
			canvas.onmousewheel = function(ev){
			    var e = ev||event;
			    num += e.wheelDelta/12000;
			    img_width = img_width*num;
				img_height = img_height*num;
				
			    ctx.clearRect(0,0,canvas.width,canvas.height);
				
			    if(img_width > 0 && img_height > 0){
			        draw_underLayer();
			    }
				num = 1;
			};
		</script>
	</body>
</html>
